<template>
  <div class="userInfo_box">
    <div class="userInfo">
      <el-form label-width="auto" style="max-width: 600px">
        <el-form-item>
          <div class="avatar">
            <el-avatar
              :size="80"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          </div>
        </el-form-item>
        <el-form-item label="用户名称" v-show="formType">
          <el-input v-model="moreUser.userName" />
        </el-form-item>
        <el-form-item label="性别" v-show="formType">
          <el-radio-group v-model="moreUser.userSex" text-color="#fff">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" v-show="formType">
          <el-input-number
            v-model="moreUser.userAge"
            :min="1"
            :max="120"
            style="width: 100%" />
        </el-form-item>
        <el-form-item label="邮箱" v-show="formType">
          <el-input v-model="moreUser.userEmail" />
        </el-form-item>
        <el-form-item label="原密码" v-show="!formType">
          <el-input v-model="oldPass" clearable />
        </el-form-item>
        <el-form-item label="现密码" v-show="!formType">
          <el-input v-model="newPass" clearable />
        </el-form-item>
        <el-form-item>
          <div class="onSubmit">
            <el-button type="primary" @click="onSubmit" style="width: 40%">
              保存
            </el-button>
            <el-button type="info" @click="openEditPass" style="width: 40%">
              {{ formType == 1 ? "修改密码" : "取消" }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { selUser, updateUser, updateUserPass } from "../../utils/https/api";
import storage from "../../storage/storage";
import { ElMessage } from "element-plus";
import router from "../../router";
let userInfo = {};
//接口用户信息
let moreUser = ref({});
// 1:用户信息 0:修改密码
let formType = ref(true);
//原密码
let oldPass = ref("");
//现密码
let newPass = ref("");
onMounted(() => {
  userInfo = JSON.parse(storage.getCookies("userInfo"));
  getUser();
});

let getUser = () => {
  selUser({ id: userInfo.id }).then((res) => {
    moreUser.value = res.data;
  });
};

let onSubmit = () => {
  if (formType.value) {
    let data = {
      id: moreUser.value.id,
      userName: moreUser.value.userName,
      userAge: moreUser.value.userAge,
      userSex: moreUser.value.userSex,
      userEmail: moreUser.value.userEmail,
    };
    updateUser(data).then((res) => {
      ElMessage.success(res.msg);
    });
  } else {
    if (!oldPass.value || !newPass.value) {
      return ElMessage.error("信息不能为空");
    }
    if (oldPass.value == newPass.value) {
      return ElMessage.error("原密码和现密码一致，请更换其他密码");
    }
    let data = {
      id: moreUser.value.id,
      newPass: newPass.value,
    };
    updateUserPass(data).then(() => {
      ElMessage.success("修改密码成功");
      storage.delCookies("userInfo");
      storage.delCookies("session");
      setTimeout(() => {
        router.push({
          path: "/",
        });
      }, 1000);
    });
  }
};

let openEditPass = () => {
  formType.value = !formType.value;
  if (!formType.value) {
    oldPass.value = "";
    newPass.value = "";
  }
};
</script>
<style scoped>
.userInfo_box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.userInfo {
  width: 30%;
  background: #88abda;
  padding: 20px;
  box-shadow: 0 0 10px #000;
  border-radius: 10px;
}
.avatar {
  display: flex;
  justify-content: center;
  width: 100%;
}
.onSubmit {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
}
</style>
